<template>
    <div class="hello"  style="background: green">
      <div id="test1" >
        <h2>Essential Links</h2>
      </div>
      {{queryObj1.extra}}
      <div v-drag-move style="width: 200px;height: 200px;background: red" v-loading="queryObj1.extra"></div>
      <div style="width: 200px;height: 200px;background: yellow" v-loading="queryObj2.extra"></div>
      <!--<child :level="1">hello</child>-->
    </div>

</template>

<script>
  import api from "@/api/api"
  import loading from "@/api/loading"
  import dragMove from "@/api/dragMove"
  import Render from "@/components/render";
  export default {
    components: {Render},
    name: "test",
    data() {
      return {
        d:'',
        queryObj1:{
            extra:{
            loading:false,
            option:{
              mark:false
            },
            // cache:{
            //   name:'testCache',
            //   storageType:'sessionStorage',
            //   expTime:'10000000000'
            // }
          },
          query:{
            "mobile": "13760765665",
            "password": "123456"
          }

        },
        queryObj2:{
            extra:{
            loading:false,
            option:{
              mark:false
            },
            // cache:{
            //   name:'testCache',
            //   storageType:'sessionStorage',
            //   expTime:'10000000000'
            // }
          },
          query:{
            "name": "web_sys_rong",
            "dataSource": "woyunbao"
          }

        }
      }
    },
    mounted() {
      this.test(this.queryObj1)
      this.test2(this.queryObj2)
    },
    directives:{
        'loading':loading,
        'dragMove':dragMove
    },
    methods: {
      qq(){
        console.log(2332)
        this.$set(this.queryObj.extra,'loading',false)
      },
      test(obj){
        api.test(obj).then(res =>{
          console.log(res, 'res',this.queryObj)
          this.d = JSON.stringify(res)
        }).catch(err => {
          console.log(err.message)
        })
      },
      test2(obj){
        api.test2(obj).then(res =>{
          console.log(res, 'res',this.queryObj)
          this.d = JSON.stringify(res)
        }).catch(err => {
          console.log(err.message)
        })
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

</style>
